<template>
	<view class="container">
		<my-nav-search></my-nav-search>
		<view class="content">
			<my-rich-text :htmlContent="htmlContent"></my-rich-text>
		</view>
		<view class="footer flex-col-end">
			<view v-for="(item,index) in operateData" :key="index" @click="handleOperate(item)">
				<image :src="item.src" mode=""></image>
			</view>
		</view>
		<my-share ref="share"></my-share>
	</view>
</template>

<script>
	import myNavSearch from "@/components/my-componets/my-nav-search.vue"
	import myRichText from "@/components/my-componets/my-rich-text"
	import myShare from "@/components/my-componets/my-share"
	export default {
		components: {
			myNavSearch,
			myRichText,
			myShare
		},
		data() {
			return {
				htmlContent: "<view ><video style='{width:100%}' id='myVideo' src='https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4' controls></video></view>",
				operateData: [{
						src: "../../static/collect-cancle.png",
						funName: "handleCancle"
					},
					{
						src: "../../static/collect.png",
						funName: "handleCollect"
					},
					{
						src: "../../static/edit.png",
						funName: "huandleLabel"
					},
					{
						src: "../../static/share.png",
						funName: "handleShare"
					},
				],
				shareShow: false,
				form: {
					time: ""
				},
				timeShow: false,
				timeList: [{
					value: '1',
					label: 'A'
				}]
			}
		},
		onLoad() {

		},
		methods: {
			handleOperate(item) {
				console.log(item.funName, "funName")
				this[item.funName]()
			},
			handleCancle() {
				console.log(1)
			},
			handleCollect() {
				console.log(2)
			},
			huandleLabel() {
				this.$Router.push({
					name: "sampleLabel"
				})
			},
			handleShare() {
				this.$refs.share.open()
			},
			timeConfirm(e) {
				this.form.time = e[0].label
				console.log(e)
			},
			confirm() {},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common/reset-tn-form.scss";
	.container {
		--btn-width:192rpx;
	}
	.content {
		padding: 40rpx 30rpx 152rpx;
		border: 2rpx solid red;
	}

	/deep/video {
		width: 100%;
	}

	.footer {
		width: 100%;
		height: 112rpx;
		position: fixed;
		bottom: 0;
		padding: 20rpx 30rpx;
		background: #ffffff;
		box-shadow: 0 4rpx 17rpx 0 #000000;

		image {
			width: 72rpx;
			height: 72rpx;
			margin-right: 20rpx;
		}
	}

	.ppt-content {
		width: 690rpx;
		height: 598rpx;
		border-radius: 30rpx;
		background-color: #ffffff;

		.title {
			padding: 60rpx 0 20rpx;
			font-size: 32rpx;
			color: #525252;
			text-align: center;
		}

		.form {
			padding: 0 158rpx 16rpx 108rpx;

			/deep/.tn-form-item--left__content {
				padding-right: 0 !important;
				margin-right: 20rpx;
				font-size: 24rpx;
			}

			/deep/.tn-input {
				width:240rpx ;
			}

			/deep/.tn-input__right-icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.unit {
				width: 20rpx;
				color: #525252;
				font-size: 24rpx;
			}
		}
	}
</style>